<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>首页-${shop.shopName}-天猫</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/index/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/shop/shopc_list.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/shop/shop.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/nav.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css"/>
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>--%>
<jsp:include page="/public_page/nav.jsp"></jsp:include>
<div id="content" class="eshop head-expand tb-shop">
    <jsp:include page="contain/header.jsp"></jsp:include>
    <div id="bd">
        <div class="layout grid-m0 J_TLayout">
            <div class="col-main">
                <div class="main-wrap J_TRegion" style="overflow:visible;">
                    <c:if test="${fn:length(shopSwitchImages) > 0}">
                        <div style="height: 600px;">
                            <div class="sn-simple-logo" style="left: auto;right: auto;width: 990px;height: 600px;top: auto;padding: 0;border: none;z-index: 1;background: none;">
                                <div class="layui-carousel sn-simple-logo" id="test1" style="left: -465px;top: 0px;height: 600px;width: 1920px;border: none;padding: 0;background: none;">
                                    <div carousel-item>
                                        <c:forEach items="${shopSwitchImages}" var="item" varStatus="vs">
                                            <div><img src="${item.shopSwitchPath}" style="width: 1920px; height: 600px;" /></div>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            layui.use('carousel', function(){
                                var carousel = layui.carousel;
                                //建造实例
                                carousel.render({
                                    elem: '#test1'
                                    ,width: '1920px' //设置容器宽度
                                    ,height: '600px'
                                    ,arrow: 'hover'
                                });
                            });
                        </script>`
                    </c:if>
                    <div class="J_TModule">
                        <div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-item-recommend">
                            <s class="skin-box-tp"><b></b></s>
                            <div class="skin-box-bd">
                                <div class="item4line1">
                                    <c:forEach items="${oneShopProducts.products}" var="product" varStatus="vs">
                                        <dl class="item">
                                            <dt class="photo">
                                                <a href="/buy.htm?pid=${product.id}" target="_blank">
                                                    <img src="${product.productImages[0].imagePath}"
                                                         alt="${product.productName}">
                                                </a>
                                            </dt>
                                            <dd class="detail">
                                                <a class="item-name"
                                                   href="/buy.htm?pid=${product.id}"
                                                   target="_blank">${product.productName}</a>
                                                <div class="attribute">
                                                    <div class="cprice-area"><span class="symbol"> ¥</span><span
                                                            class="c-price">${product.nowPrice}</span></div>
                                                    <c:if test="${product.beforePrice !=0 and product.beforePrice != product.nowPrice}">
                                                        <div class="sprice-area"><span class="symbol"> ¥</span><span
                                                                class="s-price">${product.beforePrice}</span></div>
                                                    </c:if>
                                                </div>
                                            </dd>
                                        </dl>
                                    </c:forEach>
                                </div>

                            </div>
                            <s class="skin-box-bt"><b></b></s>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout grid-s5m0 J_TLayout">
            <div class="col-main">
                <jsp:include page="contain/left_ui.jsp"></jsp:include>
                <div class="main-wrap J_TRegion">
                    <div class="J_TModule">
                        <div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-item-recommend">
                            <s class="skin-box-tp"><b></b></s>
                            <div class="skin-box-bd">
                                <c:forEach items="${twoShopProducts.products}" var="product" varStatus="vs">
                                    <div class="item3line1">
                                        <dl class="item">
                                            <dt class="photo">
                                                <a href="" target="_blank">
                                                    <img src="${product.productImages[0].imagePath}"
                                                         alt="${product.productName}">
                                                </a>
                                            </dt>
                                            <dd class="detail">
                                                <a class="item-name"
                                                   href=""
                                                   target="_blank">${product.productName}</a>
                                                <div class="attribute">
                                                    <div class="cprice-area"><span class="symbol"> ¥</span><span
                                                            class="c-price">${product.nowPrice}</span></div>
                                                    <c:if test="${product.beforePrice !=0 and product.beforePrice != product.nowPrice}">
                                                        <div class="sprice-area"><span class="symbol"> ¥</span><span
                                                                class="s-price">${product.beforePrice}</span></div>
                                                    </c:if>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
                                </c:forEach>
                            </div>
                            <s class="skin-box-bt"><b></b></s>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                $(function(){
                    $(".top-list-tab li").hover(function(){
                        $(this).addClass("selected hover").siblings().removeClass("selected hover");
                    });
                    $("#xs").hover(function(){
                        $("#collection").addClass("disappear").siblings().removeClass("disappear");

                    });
                    $("#sc").hover(function(){
                        $("#sale").addClass("disappear").siblings().removeClass("disappear");
                    });
                });
            </script>
        </div>

    </div>
    <div class="tshop-pbsm-shop-nav-ch">
        <div class="skin-box-bd" style="width: 0px; height: 0px;">
            <div class="all-cats-popup tb-shop-popup-content popup-hidden overlay-hidden"
                 style="position: absolute; top: 150px; left: 456.5px; z-index: 100000000; ">
                <div class="popup-content">
                    <div class="popup-inner">
                        <ul class="J_TAllCatsTree cats-tree">
                            <li class="cat fst-cat">
                                <h4 class="cat-hd fst-cat-hd has-children">
                                    <i class="cat-icon fst-cat-icon"></i>
                                    <a href=""
                                       class="cat-name fst-cat-name">所有宝贝</a>
                                </h4>

                                <div class="snd-pop tb-shop-popup-content axa"
                                     style="position: absolute; top: 0px; left: 188px;">
                                    <div class="popup-content">
                                        <div class="snd-pop-inner">
                                            <ul class="fst-cat-bd">
                                                <li class="cat snd-cat">
                                                    <h4 class="cat-hd snd-cat-hd">
                                                        <i class="cat-icon snd-cat-icon"></i>
                                                        <a href="/shop/search.htm?brandId=${shop.id}"
                                                           class="by-label by-sale snd-cat-name"
                                                        >按综合</a>
                                                    </h4>
                                                    <h4 class="cat-hd snd-cat-hd">
                                                        <i class="cat-icon snd-cat-icon"></i>
                                                        <a href="/shop/search.htm?brandId=${shop.id}&orderType=hotsell_desc"
                                                           class="by-label by-sale snd-cat-name"
                                                        >按销量</a>
                                                    </h4>
                                                    <h4 class="cat-hd snd-cat-hd">
                                                        <i class="cat-icon snd-cat-icon"></i>
                                                        <a href="/shop/search.htm?brandId=${shop.id}&orderType=newOn_desc"
                                                           class="by-label by-new snd-cat-name"
                                                        >按新品</a>
                                                    </h4>
                                                    <h4 class="cat-hd snd-cat-hd">
                                                        <i class="cat-icon snd-cat-icon"></i>
                                                        <a href="/shop/search.htm?brandId=${shop.id}&orderType=price_asc"
                                                           class="by-label by-price snd-cat-name"
                                                        >按价格</a>
                                                    </h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <c:forEach items="${allCategory}" var="shopCategory" varStatus="vs">
                                <li class="cat fst-cat">
                                    <h4 class="cat-hd fst-cat-hd ">
                                        <i class="cat-icon fst-cat-icon  active-trigger"></i>
                                        <a class="cat-name fst-cat-name"
                                           href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${shopCategory.value.id}">${shopCategory.value.scName}</a>
                                    </h4>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tshop-psm-shop-ww-hover ">
    <div class="skin-box-content">
        <div class="skin-box-hd">
            <div class="WW">
                <div class="img">
                    <span class="ww-light ww-large" ><a data-to-uid="${shop.slid}" target="_blank" class="ww-inline ww-online" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"><span>旺旺在线</span></a></span>
                </div>
            </div>

            <div class="toTop tb-scrolling">
                <div class="img"></div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/public_page/last.html"></jsp:include>
<jsp:include page="/public_page/open_chat.jsp"></jsp:include>
</body>
</html>
